import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import Hero from '../../ch/sections/Hero.vue'
import Btn from '../../ch/components/Btn.vue'

<Meta
  title="Sections/Content/Hero"
  components={Hero}
  argTypes={{
    type: {
      name: 'Type',
      control: {
        type: 'select',
        options: [
          'default',
          'main',
          'main-image',
          'hub',
          'title-only',
          'hidden',
        ],
      },
    },
    metaInfos: {
      name: 'MetaInfos',
      value: undefined,
    },
    authors: {
      name: 'Authors',
      value: undefined,
    },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Hero, Btn },
  template: `
    <Hero :type="type" :meta-infos="metaInfos" :authors="authors">
      <template
        v-if="${args.type == 'main-image' || args.type == 'default'}"
        v-slot:image
      >
        <picture  v-if="${args.type == 'main-image'}">
          <source srcset="https://picsum.photos/1282/961/?image=29" media="(min-width: 1800px)">
          <source srcset="https://picsum.photos/1192/894/?image=28" media="(min-width: 1024px)">
          <source srcset="https://picsum.photos/800/600/?image=29" media="(min-width: 768px)">
          <source srcset="https://picsum.photos/680/510/?image=28" media="(min-width: 480px)">
          <img src="https://picsum.photos/480/360/?image=29" alt="ratio is 4/3">
        </picture>
        <picture v-if="${args.type == 'default'}">
          <source srcset="https://picsum.photos/1282/721/?image=29" media="(min-width: 1800px)">
          <source srcset="https://picsum.photos/1192/670/?image=28" media="(min-width: 1024px)">
          <source srcset="https://picsum.photos/800/450/?image=29" media="(min-width: 768px)">
          <source srcset="https://picsum.photos/680/382/?image=28" media="(min-width: 480px)">
          <img src="https://picsum.photos/480/270/?image=29" alt="ratio is 16/9">
        </picture>
      </template>
        <template v-slot:title>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </template>
        <template v-slot:subtitle>
          Pellentesque dui dui, eleifend ac interdum eget, consectetur in odio.
        </template>
      <template v-if="${args.type !== 'main-image'} v-slot:title>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </template>
      <template
        v-if="${args.type !== 'title-only'}"
        v-slot:description
      >
        Pellentesque dui dui, eleifend ac interdum eget, consectetur in odio. Suspendisse potenti. Integer a mi ullamcorper, fermentum nisi quis, efficitur velit.
      </template>
      <template
        v-if="${args.type == 'main-image' || args.type == 'main'}"
        v-slot:cta
      >
        <Btn
            to="#"
            variant="outline"
            icon-pos="right"
            icon="ArrowRight"
            label="Unsere Dienstleistungen"
          />
      </template>
    </Hero>
    `,
})

# Hero

## Main hero without image

**The `.hero.hero--main` section is used on the [homepage](?path=/docs/pages-homepage--example) or on [landing pages](?path=/docs/pages-detail-page-complex--example).**

This variant doesn't contain any article type, date or authors.

<Canvas>
  <Story
    name="Main without image"
    args={{
      type: 'main',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Main hero with image

**The `.hero.hero--main-image` section is used on the [homepage](?path=/docs/pages-homepage--example) or on [landing pages](?path=/docs/pages-detail-page-complex--example),** when an image is available.

This variant doesn't contain any article type, date or authors.

The image should have a 4:3 ratio and the height of both title and description shouldn't be bigger than the height of the image on a large desktop.

<Canvas>
  <Story
    name="Main with image"
    args={{
      type: 'main-image',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Hero for hub pages

**The `.hero.hero--hub` section is used on the [hub pages](?path=/docs/pages-hub-page--example), where children pages are listed on a dark background right after the hero section.**

This variant doesn't contain any article type, date or authors.

<Canvas>
  <Story
    name="Hub page"
    args={{
      type: 'hub',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Hero for detail pages

**The `.hero.hero--default` section is used on the [detail pages](?path=/docs/pages-detail-page-simple--example).**

This variant can optionally contain an article type, a date and one ore more authors.

<Canvas>
  <Story
    name="Detail page"
    args={{
      type: 'default',
      metaInfos: ['Webartikel', '23. Februar 2022'],
      authors: [
        {
          name: 'Maria Muster',
          img: 'https://picsum.photos/120/120/?image=29',
        },
        {
          name: 'Jean-Jaques Langerename',
          img: 'https://picsum.photos/120/120/?image=30',
          url: '#',
        },
        {
          name: 'Hans Höllman',
          img: 'https://picsum.photos/120/120/?image=31',
        },
        {
          name: 'Katja Anna-Beerli',
          img: 'https://picsum.photos/120/120/?image=32',
        },
      ],
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Hero for detail pages, with only a title and subtitle

**The `.hero.hero--title-only` section is used on [detail pages](?path=/docs/pages-test-hero-title-only--example) where the hero only contains a title and subtitle.**

This variant can contain only a title and subtitle.

<Canvas>
  <Story
    name="Detail page - title only"
    args={{
      type: 'title-only',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Hero for screenreaders only

If there isn't any specific content for the hero, we still need to display a `h1` title for screen readers.
Set type to `sr-only` to hide the component visually. Check the <a href="?path=/story/sections-content-hero--example">Storybook Canvas Tab</a> to display the HTML markup.

<Canvas>
  <Story
    name="Screen readers only"
    args={{
      type: 'sr-only',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<a href="?path=/story/sections-content-hero--example">Go to the Canvas Tab</a>import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
import Btn from '../../ch/components/Btn.vue'
import Hero from '../../ch/sections/Hero.vue'

